import type { CompanyInfoDto, PeriodInfoDto } from '@/api/company/types'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Prop } from 'vue-facing-decorator'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import toNative from '@/utils/toNative'
import type { FilterDto } from '@/render/FilterRender'
import { getKeyToEnum, InsurancePeriodStatusCnEnum } from '@/const/enum'
import { getInsuranceCheckList } from '@/api/insurance/period'
import type {
    InsuranceCheckDto,
    OccupationDto,
} from '@/api/insurance/period/types'
import PreviewVideoOrImage from '@/components/preview-media/PreviewVideoOrImage'
@Component
export class InsuranceCheck extends TableRender {
    @Prop() basicData!: PeriodInfoDto
    @Prop() companyBasicInfo!: CompanyInfoDto

    noTablePadding = true
    noFilterPadding = true
    filterTheme = 'light'

    showVideoDialog = false
    curItem = {}
    videoList = [] as string[]

    filterConfig() {
        return {
            serveCompanyName: {
                name: '派遣单位',
                element: 'input',
                span: 24
            },
            status: {
                name: '保险状态',
                element: 'radioGroup',
                span: 24,
                options: getKeyToEnum(InsurancePeriodStatusCnEnum, true)
            }
        } as FilterDto
    }

    tableConfig() {
        const config = super.tableConfig()
        config.height = '400px'
        return config
    }

    tableColumnConfigOld = () => [
        {
            field: 'serveCompanyName',
            title: '派遣单位'
        },
        {
            field: 'status',
            title: '状态',
            formatter: ({row}) => {
                return InsurancePeriodStatusCnEnum[row.status]
            }
        },
        {
            field: 'occupationList',
            title: '工种',
            width: 120,
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return (
                        <div>
                            {row.occupationList?.map((item: OccupationDto) => {
                                return (
                                    <div>
                                        <span>{item.name}</span>
                                        {item.level && <span>（{item.level}）类</span>}
                                    </div>
                                )
                            })}
                        </div>
                    )
                }
            }
        },
        {
            field: 'fileDetailList',
            title: '图片视频',
            slots: {
                default: ({ row, column }) => {
                    return <PreviewVideoOrImage src={row.fileDetailList} />
                }
            }
        },
        {
            field: 'createTime',
            title: '提交时间',
            width: 160
        },
        {
            field: 'area',
            title: '地区'
        }
        // {
        //     field: 'operate',
        //     title: '操作',
        //     slots: {
        //         default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
        //             return (
        //                 <div>
        //                     <ElLink underline={false} type="primary">
        //                         添加视频
        //                     </ElLink>
        //                     <ElLink underline={false} type="success">
        //                         通过
        //                     </ElLink>
        //                     <ElLink underline={false} type="danger">
        //                         驳回
        //                     </ElLink>
        //                     <ElLink underline={false} type="primary">
        //                         拒保
        //                     </ElLink>
        //                     <ElLink underline={false} type="primary">
        //                         取消拒保
        //                     </ElLink>
        //                 </div>
        //             )
        //         }
        //     }
        // }
    ] as TableRenderColumnTypes<InsuranceCheckDto>

    onShowVideo(list: string[]) {
        this.videoList = list
        this.showVideoDialog = true
    }

    getData() {
        this.onPage({
            type: 'current',
            currentPage: 1
        })
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.basicData?.companyId) return []
        return getInsuranceCheckList({
            companyId: this.basicData.companyId,
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    render() {
        return (
            <>
                <div class="bg-white-dark-100 text-base px-12px py-8px mb-12px">投保审核</div>
                <div>{super.render()}</div>
            </>
        )
    }
}

export default toNative<
    { basicData: PeriodInfoDto; companyBasicInfo: CompanyInfoDto },
    { refresh: () => void }
        >(InsuranceCheck)
